<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<title>我的收货地址</title>
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/app.css">
		<style>
			html,
			body {
				height: 100%;
				overflow: auto;
			}
			.mui-table-view-cell.mui-active{background: #fff;}
			.box1 {
				width: 7.5rem;
				position: relative;
				padding: 0;
				margin-bottom: 0.1rem;
			}
			
			.mui-table-view:before,
			.mui-table-view:after {
				height: 0;
			}
			
			.box1 .mui-table-view-cell:after {
				position: absolute;
				right: 0;
				bottom: 0;
				left: 0px;
				height: 0.2rem;
				content: '';
				-webkit-transform: scaleY(.5);
				transform: scaleY(.5);
				background-color: #eeeeee;
			}
			
			.box2 .mui-table-view-cell:after {
				position: absolute;
				right: 0;
				bottom: 0;
				left: 0px;
				height: 1px;
				content: '';
				-webkit-transform: scaleY(.5);
				transform: scaleY(.5);
				background-color: #eeeeee;
			}
			
			.box3 .mui-table-view-cell:after {
				position: absolute;
				right: 0;
				bottom: 0;
				left: 0px;
				height: 1px;
				content: '';
				-webkit-transform: scaleY(.5);
				transform: scaleY(.5);
				background-color: #eeeeee;
			}
			
			.mui-table-view-cell {
				padding: 0;
			}
			
			.mui-table-view .mui-table-view-cell:last-child:after {
				height: 0;
			}
			
			.box1 .mui-table-view-cell {
				width: 100%;
				/*height: 2.9rem*/
				;
				position: relative;
			}
			
			.box1 .box2 .mui-table-view-cell:first-child {
				width: 100%;
				/*height: 2.0rem;*/
			}
			
			.box1 .mui-table-view-cell:first-child {
				padding-top: 0.2rem;
			}
			
			.my_info {
				width: 7.03rem;
				height: 0.27rem;
				font-size: 0.26rem;
				line-height: 0.27rem;
				margin: 0 auto;
				margin-top: 0.33rem;
				margin-bottom: 0.26rem;
				padding-right: 0.12rem;
				color: #3d4245;
			}
			
			.my_info span:first-child {
				float: left;
			}
			
			.my_info span:last-child {
				float: right;
			}
			
			.address {
				font-weight: bold;
				width: 7.03rem;
				/*height: 0.64rem*/
				;
				font-size: 0.3rem;
				margin: 0 auto;
				margin-bottom: 0.31rem;
				line-height: 0.37rem;
				color: #333333;
			}
			
			.box2 .mui-table-view-cell:last-child {
				height: 0.9rem;
				position: relative;
			}
			
			.approve {
				width: 1.49rem;
				height: 0.33rem;
				font-size: 0.26rem;
				color: #707070;
				text-align: right;
				line-height: 0.33rem;
				background: url(../../images/menu/ok1.png) no-repeat center left;
				background-size: 0.26rem;
				background-position-y: 0.02rem;
				position: absolute;
				top: 0.3rem;
				left: 0.3rem;
			}
			
			.edit {
				width: 2.5rem;
				height: 0.37rem;
				position: absolute;
				top: 0.25rem;
				right: 0.38rem;
			}
			
			.edit div {
				width: 1.04rem;
				height: 100%;
				text-align: right;
				color: #8c8c8c;
				font-size: 0.26rem;
				line-height: 0.44rem;
			}
			
			.edit .redact {
				float: left;
				background: url(../../images/menu/redact.png) no-repeat center left;
				background-size: 0.4rem;
			}
			
			.edit .del {
				float: right;
				background: url(../../images/menu/del.png) no-repeat center left;
				background-size: 0.4rem;
			}
			
			.box3 {
				width: 7.5rem;
				/*height: 3.2rem;*/
				position: relative;
				bottom: 0;
				/*margin-top: 1rem;*/
			}
			
			.box3 .mui-table-view-cell:first-child {
				height: 2.23rem;
			}
			
			.box3 .mui-table-view-cell:last-child {
				height: 0.98rem;
				color: #1653fc;
				text-align: center;
				line-height: 0.98rem;
				background: url(../../images/menu/add.png) no-repeat center center;
				background-position-x: 2.53rem;
				background-size: 0.42rem;
			}
			
			.active {
				width: 1.49rem;
				height: 0.33rem;
				font-size: 0.26rem;
				color: #1592fc;
				text-align: right;
				line-height: 0.33rem;
				background: url(../../images/menu/ok.png) no-repeat center left;
				background-size: 0.26rem;
				background-position-y: 0.02rem;
				position: absolute;
				top: 0.3rem;
				left: 0.3rem;
			}
		</style>
	</head>

	<body>
		<ul class="mui-table-view box1" id="addressListUl">
		</ul>
		<ul class="mui-table-view box3">
			<li class="mui-table-view-cell" id="addAddress">新增地址</li>
		</ul>
		<!--该隐藏域用来保存地址数量，判断是否可以添加地址-->
		<input type="hidden" value="" id="isAddFlag"/>
	</body>
	<script>
		function my_immersed(immersed){
		}
	</script>
	<script src="../../js/immersed.js"></script>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/jquery2.2.4.min.js"></script>
	<script src="../../js/app.js"></script>
	<script src="../../js/common.js"></script>
	<script>
		var userId = "";
		var isAddFlag = true; // 是否可以新增地址
		mui.plusReady(function() {
			//获取上一个页面传过来的参数开始
			userId = getUserId();
			loadAddressList();
			var lastViewId = utils.getUrlParam("viewId");
			if(lastViewId){//add by wangsh 事项登记时添加 返回监听,
				var tempV = plus.webview.currentWebview();
				tempV.addEventListener('close',function(){
					var lastView = plus.webview.getWebviewById(lastViewId);
					mui.fire(lastView,'loadAddressList');
				})
			}
		});
		//添加地址成功后回调
		document.addEventListener('addaddress',function(){
			loadAddressList();
		})
		/**
		 * 加载收货地址列表数据
		 * @param {Object} userId 用户主键
		 */
		function loadAddressList() {
			var param = 'userId=' + userId;
			var url = 'appHttpService/appUserAddressList.do';
			utils.ajax(url, function(data) {
				data = JSON.parse(data);
				if(data.code == 0 && data.total != null) {
					var netUserAddressList = JSON.parse(data.netUserAddressList);
					var addressHtml = "";
					for(var i in netUserAddressList) {
						addressHtml += "<li class='mui-table-view-cell' id='" + netUserAddressList[i].oid + "_Li'>";
						addressHtml += "<ul class='mui-table-view box2'>";
						addressHtml += "<li class='mui-table-view-cell'>";
						addressHtml += "<div class='my_info'>";
						addressHtml += "<span>" + netUserAddressList[i].addresseeName + "</span><span>" + netUserAddressList[i].addresseePhone + "</span>";
						addressHtml += "</div>";
						addressHtml += "<div class='address'>" + netUserAddressList[i].addresseeAddress + "</div>";
						addressHtml += "</li>";
						addressHtml += "<li class='mui-table-view-cell'>";
						if(netUserAddressList[i].defaultFlag == 1) {
							addressHtml += "<div class='approve active' id=" + netUserAddressList[i].oid + " >默认地址</div>";
						} else {
							addressHtml += "<div class='approve' id=" + netUserAddressList[i].oid + ">设为默认</div>";
						}
						addressHtml += "<div class='edit'><div class='redact' id=" + netUserAddressList[i].oid + ">编辑</div><div class='del' id=" + netUserAddressList[i].oid + ">删除</div>";
						addressHtml += "</div>";
						addressHtml += "</li>";
						addressHtml += "</ul>";
						addressHtml += "</li>";
					}
					document.getElementById("addressListUl").innerHTML = addressHtml;
					isAddFlag = netUserAddressList.length < 10;
					//关闭进度条
					closeWaitingAndShowView();
				}
			}, param);
		};

		/**
		 * 设为默认
		 */
		mui("body").on('tap', '.approve', function() {
			utils.showWaiting();
			var obj = this;
			var oid = obj.getAttribute('id');
			var param = 'oid=' + oid+'&userId='+userId;
			var url = 'appHttpService/appSetDefaultAddress.do';
			utils.ajax(url, function(data) {
				data = JSON.parse(data);
				if(data.code == 0) {
					$('.approve').removeClass('active');
					$('.approve').html('设为默认');
					$(obj).addClass('active');
					$(obj).html('默认地址');
					closeWaitingAndShowView();
				}else{
					mui.toast("设置默认地址失败！");
					closeWaitingAndShowView();
				}
			}, param);
		})

		/**
		 * 删除功能
		 */
		mui("body").on('tap', '.edit .del', function() {
			var oid = this.getAttribute('id');
			var btnArray = ['否', '是'];
			mui.confirm('确定要删除吗？', '提示信息', btnArray, function(e) {
				if(e.index == 1) {
					var param = 'oid=' + oid;
					var url = 'appHttpService/appDelUserAddress.do';
					utils.ajax(url, function(data) {
						data = JSON.parse(data);
						if(data.code == 0) {
							document.getElementById(oid + "_Li").remove();
							mui.toast("删除成功！");
						}
					}, param);
				}
			})
		})
		
	  /**
	   * 新增地址
	   */
	  document.getElementById('addAddress').addEventListener('tap',function(){
	  		if(isAddFlag) {
	  			showTemplates('add_address','新增地址','../my/add_address.html');
	  		} else {
	  			mui.alert("对不起！您创建的收货地址数量已达上限！", "", "", "", "div");
	  		}
		});
	  
	  /**
	   * 修改地址
	   */
	  mui("body").on('tap', '.edit .redact', function() {
	  	    var param = 'addressId=' + this.getAttribute('id');
			showTemplates('add_address','修改地址','../my/add_address.html?'+param);			
		})
	</script>

</html>